import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
import { Row, Col, Button, Space, Tabs } from 'antd';
import { connect } from 'umi';
import { settle_type, CommissionType } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import SelectModel from './components/SelectModel'
const SettingOpeational = (props, ref) => {
  const { onChange, list = [], disabled = false, } = props
  useEffect(() => {
    if (list.length) {
      setData(list)
    }

  }, [list])
  const [data, setData] = useState([])
  const [visible, setVisible] = useState(false)
  const getColumns = [
    {
      title: '分佣等级',
      dataIndex: 'levelName',
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '移除',
          click: () => {
            onChange([])
          },
        },
      ],
    },
  ];

  return (
    <Row gutter={[0, 24]} style={{ marginBottom: 24 }}>
      <Col style={{ textAlign: 'right', paddingRight: 8, display: 'flex', alignItems: "center", justifyContent: 'flex-end' }} span={6}>
        设置佣金配置 :
      </Col>
      <Col span={18}>
        <Button
          disabled={disabled}
          onClick={() => {
            setVisible({ show: true, details: data });
          }}
        >

          +选择佣金级别
        </Button>
      </Col>
      <Col span={18} offset={6}>
        <TableDataBlock
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          list={list}
        ></TableDataBlock>

      </Col>

      <SelectModel onOk={(e) => {
        setData(e);
        onChange(e)
      }} visible={visible} onClose={() => setVisible(false)}></SelectModel>
    </Row >
  )
};
export default SettingOpeational